<template>
  <div>
    <div v-if="role == 'operator' || role == 'agent' || role == 'platform'">
      <!-- Order Details start -->
      <p class="ft18 mb20">
        <i class="el-icon-s-flag"></i>
        Order Details
      </p>
      <el-row class="pl20" :gutter="30">
        <!-- <el-col class="mb30" :span="12">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">充电订单</div>
            <div class="flex_a tac">
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.chrNum }}</p>
                <p class="ft14 c6">订单总数量</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.chrTotalAmount }}</p>
                <p class="ft14 c6">订单总Money</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.chrRefundAmount }}</p>
                <p class="ft14 c6">退款总Money</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.chrProfitAmount }}</p>
                <p class="ft14 c6">订单总收益</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.chrDivideAmount }}</p>
                <p class="ft14 c6">分成收益</p>
              </div>
            </div>
          </el-card>
        </el-col> -->
        <el-col class="mb30" :span="12">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">Battery Swap Orders</div>
            <div class="flex_a tac">
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.excNum }}</p>
                <p class="ft14 c6">Total Order Quantity</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.excTotalAmount }}</p>
                <p class="ft14 c6">Total Order Money</p>
              </div>

              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.excProfitAmount }}</p>
                <p class="ft14 c6">Total Order Revenue</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.excDivideAmount }}</p>
                <p class="ft14 c6">Profit Sharing</p>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col class="mb30" :span="12" v-if="remark == 1">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">Charging Pile Order</div>
            <div class="flex_a tac">
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ "34" }}</p>
                <p class="ft14 c6">Total Order Quantity</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ "155.00" }}</p>
                <p class="ft14 c6">Total Order Money</p>
              </div>

              <div class="flex1">
                <p class="mb10 ft24 danger">{{ "155.00" }}</p>
                <p class="ft14 c6">Total Order Revenue</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ "0" }}</p>
                <p class="ft14 c6">Profit Sharing</p>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- <el-col class="mb30" :span="12">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">租车订单</div>
            <div class="flex_a tac">
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.rentNum }}</p>
                <p class="ft14 c6">订单总数量</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.rentTotalAmount }}</p>
                <p class="ft14 c6">订单总Money</p>
              </div>

              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.rentProfitAmount }}</p>
                <p class="ft14 c6">订单总收益</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.rentDivideAmount }}</p>
                <p class="ft14 c6">分成收益</p>
              </div>
            </div>
          </el-card>
        </el-col> -->
        <el-col class="mb30" :span="12">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">Recharge Orders</div>
            <div class="flex_a tac">
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.czNum }}</p>
                <p class="ft14 c6">Total Order Quantity</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.czTotalAmount }}</p>
                <p class="ft14 c6">Total Recharge Amount</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">{{ orderInfo.czGiveAmount }}</p>
                <p class="ft14 c6">Total Gift Amount</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- Order Details end -->
      <!-- 运营角色 start -->
      <div class="mb30" v-if="role == 'operator'">
        <p class="ft18 mb20">
          <i class="el-icon-s-flag"></i>
          Operational Role
        </p>

        <el-row class="pl20">
          <el-col :span="12">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">Operational Role</div>
              <div class="flex_a tac">
                <div class="flex1">
                  <p class="mb10 ft24 danger">
                    {{ operatorInfo.agentNum || 0 }}
                  </p>
                  <p class="ft14 c6">Agent Number</p>
                </div>
                <!-- <div class="flex1">
                  <p class="mb10 ft24 danger">
                    {{ operatorInfo.siteNum || 0 }}
                  </p>
                  <p class="ft14 c6">站点数量</p>
                </div> -->
                <div class="flex1">
                  <p class="mb10 ft24 danger">
                    {{ operatorInfo.mainteNum || 0 }}
                  </p>
                  <p class="ft14 c6">Maintenance Personnel Number</p>
                </div>
                <div class="flex1">
                  <p class="mb10 ft24 danger">
                    {{ operatorInfo.userNum || 0 }}
                  </p>
                  <p class="ft14 c6">User Number</p>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 运营角色 end -->
      <!-- Device Details start -->
      <p class="ft18 mb20">
        <i class="el-icon-s-flag"></i>
        Device Details
      </p>
      <el-row class="pl20" :gutter="30">
        <el-col class="mb30" :span="12">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">Battery Swap Cabinet</div>
            <div class="flex_a tac">
              <div class="flex1">
                <p class="mb10 ft24 danger">
                  {{ deviceInfo.excTotalNum || 0 }}
                </p>
                <p class="ft14 c6">Device Number</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">
                  {{ deviceInfo.excOnlineNum || 0 }}
                </p>
                <p class="ft14 c6">Online Device</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">
                  {{ deviceInfo.excOfflineNum || 0 }}
                </p>
                <p class="ft14 c6">Offline Device</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">
                  {{ deviceInfo.excFaultNum || 0 }}
                </p>
                <p class="ft14 c6">Failure Equipment</p>
              </div>
              <div class="flex1">
                <p class="mb10 ft24 danger">
                  {{ deviceInfo.excDisableNum || 0 }}
                </p>
                <p class="ft14 c6">Forbidden Device</p>
              </div>
            </div>
          </el-card>
        </el-col>
        <div v-if="VUE_APP_URL.indexOf('changecabinet') !== -1">
          <el-col class="mb30" :span="12">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">Battery Swap Cabinet</div>
              <div class="flex_a tac">
                <div class="flex1">
                  <p class="mb10 ft24 danger">{{ deviceInfo.chrTotalNum }}</p>
                  <p class="ft14 c6">Device Number</p>
                </div>
                <div class="flex1">
                  <p class="mb10 ft24 danger">{{ deviceInfo.chrOnlineNum }}</p>
                  <p class="ft14 c6">Online Device</p>
                </div>

                <div class="flex1">
                  <p class="mb10 ft24 danger">{{ deviceInfo.chrOfflineNum }}</p>
                  <p class="ft14 c6">Offline Device</p>
                </div>
                <div class="flex1">
                  <p class="mb10 ft24 danger">{{ deviceInfo.chrFaultNum }}</p>
                  <p class="ft14 c6">Failure Equipment</p>
                </div>
                <div class="flex1">
                  <p class="mb10 ft24 danger">{{ deviceInfo.chrDisableNum }}</p>
                  <p class="ft14 c6">Forbidden Device</p>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col class="mb30" :span="12">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">Electrocar</div>
              <div class="flex_a tac">
                <div class="flex1">
                  <p class="mb10 ft24 danger">{{ deviceInfo.carTotalNum }}</p>
                  <p class="ft14 c6">Car Number</p>
                </div>
                <div class="flex1">
                  <p class="mb10 ft24 danger">{{ deviceInfo.carDisableNum }}</p>
                  <p class="ft14 c6">Forbidden Number</p>
                </div>

                <div class="flex1">
                  <p class="mb10 ft24 danger">{{ deviceInfo.carRentNum }}</p>
                  <p class="ft14 c6">Leasing</p>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col class="mb30" :span="12">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">Battery</div>
              <div class="flex_a tac">
                <div class="flex1">
                  <p class="mb10 ft24 danger">{{ deviceInfo.btTotalNum }}</p>
                  <p class="ft14 c6">Battery Number</p>
                </div>
                <div class="flex1">
                  <p class="mb10 ft24 danger">{{ deviceInfo.btRentNum }}</p>
                  <p class="ft14 c6">Leasing</p>
                </div>
              </div>
            </el-card>
          </el-col>
        </div>
      </el-row>

      <!-- Device Details end -->

      <!-- 图表展示区  start -->
      <p class="ft18 mb20">
        <i class="el-icon-s-flag"></i>
        Chart
      </p>
      <div class="pl20">
        <el-card>
          <div slot="header">
            <div class="flex_sb">
              <div>
                <el-button
                  :type="type == item.status ? 'primary' : 'default'"
                  v-for="item in typeList"
                  :key="item.status"
                  @click="changeTab(item.status, 'type')"
                  >{{ item.name }}</el-button
                >
              </div>
              <div class="pr100">
                <el-tag
                  class="ml10 plr20 ft16"
                  :type="dateType == item.status ? 'primary' : 'info'"
                  v-for="item in dateTypeList"
                  :key="item.status"
                  @click="changeTab(item.status, 'dateType')"
                  >{{ item.name }}</el-tag
                >
              </div>
            </div>
          </div>
          <div style="height: 580px">
            <!-- 订单Statistics start -->
            <p class="ft16 mb20">
              <i class="el-icon-data-line"></i>
              Order Statistics
            </p>
            <el-row class="mb20" style="height: 240px">
              <el-col class="tac" :span="3">
                <div class="mtb20">
                  <p class="mb10">Total Number Of Orders This Month</p>
                  <p class="mb10 ft20">{{ saleInfo.monthOrderNum }}</p>
                  <div>
                    <span
                      :class="saleInfo.monthNumRate >= 0 ? 'success' : 'danger'"
                    >
                      <i
                        :class="
                          saleInfo.monthNumRate >= 0
                            ? 'el-icon-caret-top'
                            : 'el-icon-caret-bottom'
                        "
                      ></i>
                      {{ saleInfo.monthNumRate }}%
                    </span>
                    Last Month's Year-On-Year
                  </div>
                </div>
                <div class="mb20">
                  <p class="mb10">Total Number Of Orders This Week</p>
                  <p class="mb10 ft20">{{ saleInfo.weekOrderNum }}</p>
                  <div>
                    <span
                      :class="saleInfo.weekNumRate >= 0 ? 'success' : 'danger'"
                    >
                      <i
                        :class="
                          saleInfo.weekNumRate >= 0
                            ? 'el-icon-caret-top'
                            : 'el-icon-caret-bottom'
                        "
                      ></i>
                      {{ saleInfo.weekNumRate }}%
                    </span>
                    Compared To Last Week
                  </div>
                </div>
              </el-col>
              <el-col :span="20">
                <r-lineChart
                  :chart-data="orderNumChartData"
                  height="240px"
                  class="flex1"
                >
                </r-lineChart>
              </el-col>
            </el-row>
            <!-- 订单Statistics end -->
            <!-- 销售Statistics start -->
            <p class="ft16 mb20">
              <i class="el-icon-data-line"></i>
              Sale Statistics
            </p>
            <el-row class="mb20" style="height: 240px">
              <el-col class="tac" :span="3">
                <div class="mtb20">
                  <p class="mb10">Total Sales For This Month</p>
                  <p class="mb10 ft20">{{ saleInfo.monthOrderAmount }}</p>
                  <div>
                    <span
                      :class="
                        saleInfo.monthAmountRate >= 0 ? 'success' : 'danger'
                      "
                    >
                      <i
                        :class="
                          saleInfo.monthAmountRate >= 0
                            ? 'el-icon-caret-top'
                            : 'el-icon-caret-bottom'
                        "
                      ></i>
                      {{ saleInfo.monthAmountRate }}%
                    </span>
                    Last Month's Year-On-Year
                  </div>
                </div>
                <div class="mb20">
                  <p class="mb10">Total Sales For This Week</p>
                  <p class="mb10 ft20">{{ saleInfo.weekOrderAmount }}</p>
                  <div>
                    <span
                      :class="
                        saleInfo.weekAmountRate >= 0 ? 'success' : 'danger'
                      "
                    >
                      <i
                        :class="
                          saleInfo.weekAmountRate >= 0
                            ? 'el-icon-caret-top'
                            : 'el-icon-caret-bottom'
                        "
                      ></i>
                      {{ saleInfo.weekAmountRate }}%
                    </span>
                    Compared To Last Week
                  </div>
                </div>
              </el-col>
              <el-col :span="20">
                <r-lineChart
                  :chart-data="saleToatalChartData"
                  height="240px"
                  class="flex1"
                >
                </r-lineChart>
              </el-col>
            </el-row>
            <!-- 销售Statistics end -->
          </div>
        </el-card>
      </div>
      <!-- 图表展示区  end -->
      <div></div>
    </div>
    <div
      style="
        text-align: center;
        font-size: 50px;
        font-weight: bold;
        line-height: 500px;
      "
      v-else
    >
      Management Platform
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      qqq: "",
      VUE_APP_URL: process.env.VUE_APP_URL,
      orderInfo: {},
      operatorInfo: {},
      deviceInfo: {},
      saleInfo: {}, // Statistics
      typeList: [
        { name: "Battery Swap Orders", status: 1 }
        // { name: "充电订单", status: 2 },
        // { name: "租车订单", status: 3 },
      ],
      dateTypeList: [
        { name: "Today", status: 1 },
        { name: "This Week", status: 2 },
        { name: "This Month", status: 3 }
      ],
      type: 1,
      dateType: 3,
      orderNumChartData: {
        xData: [],
        yData: [],
        name: "Order Number",
        title: "Order Statistics",
        isShowSolid: false
      },
      saleToatalChartData: {
        xData: [],
        yData: [],
        name: "Sales Volume",
        title: "Sale Statistics",
        isShowSolid: false
      },
      remark: undefined
    };
  },
  computed: {
    role() {
      return sessionStorage.role;
    }
  },
  created() {
    this.init();
    this.remark = window.sessionStorage.getItem("remark");
  },
  mounted() {},
  methods: {
    init() {
      if (
        this.role == "operator" ||
        this.role == "agent" ||
        this.role == "platform"
      ) {
        this.homePageOrder();
        if (this.role == "operator" || this.role == "platform") {
          this.homePageRole();
        }
        this.homeDeviceInfo();
        this.orderStatistics();
        this.orderLineChart();
        this.orderStatistics();
      }
    },
    // 获取订单Data
    async homePageOrder() {
      const res = await this.apis.homePageOrder();
      this.orderInfo = res.data;
    },
    // 获取Operator相关Data
    async homePageRole() {
      const res = await this.apis.homePageRole();
      this.operatorInfo = res.data;
    },
    // 设备信息
    async homeDeviceInfo() {
      const res = await this.apis.homeDeviceInfo();
      // console.log(345433, res.data);
      this.deviceInfo = res.data;
    },
    // 切换tab栏
    changeTab(status, typeName) {
      if (this[typeName] == status) {
        return false;
      }
      this[typeName] = status;
      this.orderLineChart();
      if (typeName == "type") {
        this.orderStatistics();
      }
    },
    // 首页-折线图
    async orderLineChart() {
      const res = await this.apis.orderLineChart({
        dateType: this.dateType,
        type: this.type
      });
      const arr = res.data;
      const xData = [];
      const orderCountArr = [];
      const totalOrderAmountArr = [];

      arr.forEach(ele => {
        xData.push(ele.day.replace(/-/g, "."));
        orderCountArr.push(ele.orderCount);
        totalOrderAmountArr.push(ele.totalOrderAmount);
      });

      this.orderNumChartData.xData = xData;
      this.orderNumChartData.yData = orderCountArr;

      this.saleToatalChartData.xData = xData;
      this.saleToatalChartData.yData = totalOrderAmountArr;

      if (this.dateType == 3) {
        this.orderNumChartData.isShowSolid = true;
        this.saleToatalChartData.isShowSolid = true;
      } else {
        this.orderNumChartData.isShowSolid = false;
        this.saleToatalChartData.isShowSolid = false;
      }
    },
    // // 首页-Statistics本月本周同比
    async orderStatistics() {
      const res = await this.apis.orderStatistics({ type: this.type });
      this.saleInfo = res.data;
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-card__header {
  background: #f5f5f5;
}
</style>
